<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群消息</title>
    <script src="./jquery-1.12.1.js"></script>
    <script src="./socket.io.js"></script>
    <script>
        $(document).ready(function(){
			var groupCount = 0;
			 $.get({
				url: "http://59.110.5.217:30014/splitter/enzyme",
				success: function (data) {
					console.log(data);
				
					if(data.code != 0){
						console.log(data);
						return;
					}
					
					var wsUrl = "ws://59.110.5.217:30015/msg"//data.data;
					console.log(wsUrl);
					
					var initCommand =  {
						"type":"message",
						"command": "init",
						"version":"0.1",
						"id":"b5265010-bb7a-11e6-a60f-77d95c87b12",
						"data": {
							"clientInfo":"enzyme",
							"clientNature":"enzyme",
							"clientType":"web",
						}
					}
					
					var loginCommand = {
							"command": "login",
							"version":"0.1",
							"id":"b5265010-bb7a-11e6-a60f-77d95c87b193",
							"data":{
							  "userName":"zzgghh",
							  "password":"password",//如果支持其他登录方式，这里的信息可能是其他的
							  "loginType":"dependency",//singleton|dependency  用户单独登录，或者依赖客户端登录
							  "clientNature":"enzyme"//可选参数，用户在依赖模式登录下必填
							}
						}
					
					var ws = new WebSocket(wsUrl);
					ws.onopen = WSonOpen;
					ws.onmessage = WSonMessage;
					ws.onclose = WSonClose;
					ws.onerror = WSonError;

					function WSonOpen() {
						Log("连接已经建立。", "OK");
						ws.send(JSON.stringify(initCommand));
						ws.send(JSON.stringify(loginCommand));
					};

					function WSonMessage(event) {
						//$("#message").append("<h4>来自服务端消息："+event.data+"</h4>");
						Log(event.data);
						var msg = JSON.parse(event.data);
						Log(msg);
						if(msg.event == "acceptMessage"){
							if(msg.data.msgType == "message"){
								$("#message").append("<h4>来自服务端消息："+event.data+"</h4>");
								Log(event.data);
							} else if(msg.data.msgType == "group"){
								if(msg.data.sender != "zzgghh"){
									$("#content").append("<div>"+msg.data.sender+"说："+msg.data.content+"</div></br>");
								}
							} else if(msg.data.msgType == "notify"){
								$("#notify").append("<div>"+msg.data.sender+"说："+msg.data.content+"</div></br>");
							}
						} else {
							$("#init_message").append("来自服务端消息："+event.data + "</br>");
						}
					};

					function WSonClose() {
						Log("连接关闭。", "ERROR");
					};


					function WSonError() {
						Log("WebSocket错误。", "ERROR");
					};

					function Log(mes){
						console.log(mes);
					}
					
					$("#send").click(function(){
						Log($("#sender_c").val());
						var command = {
							"command":"sendmessage",
							"version":"0.1",
							"id":"b5265010-bb7a-11e6-a60f-77d95c87b19f",
							"data": {
								"type":"group",
								"groupId":"1",
								"sender":"zzgghh",
								"content":$("#sender_c").val(),
								"options":{
									"save":"true"
								},
							}
						}
						console.log(command);
						ws.send(JSON.stringify(command));
						$("#content").append("<div style='float:right;'>"+"zzgghh"+"说："+$("#sender_c").val()+"</div></br>");
						$("#sender_c").val("");
					});
					
					$("#login").click(function(){
						var loginCommand = {
							"command": "login",
							"version":"0.1",
							"id":"b5265010-bb7a-11e6-a60f-77d95c87b193",
							"data":{
							  "userName":"zzgghh",
							  "password":"33333333",//如果支持其他登录方式，这里的信息可能是其他的
							  "loginType":"dependency",//dependency|singleton  用户单独登录，或者依赖客户端登录
							  "clientNature":"enzyme"//可选参数，用户在依赖模式登录下必填
							}
						}
						
						var initCommand =  {
							"type":"message",
							"command": "init",
							"version":"0.1",
							"id":"b5265010-bb7a-11e6-a60f-77d95c87b192",
							"data": {
								"clientInfo":"enzyme",
								"clientNature":"enzyme",
								"clientType":"web",
							}
						}
						Log(loginCommand)
						ws.send(JSON.stringify(loginCommand));
					});
					
				},
				error:function() {
					return alert("系统异常,获取用户信息失败");
				}
			});
			
			$.ajax({
				url: "http://59.110.5.217:30014/message/query",
				type:"POST",
				dataType:"JSON",
				data:{//前端用js post数据时，多层的json数据会被后台解析成‘data[filters][type]'='notify'这种格式，所以用formatString做键值转换一下，
								//我会在后台判断formatString是否存在，如果存在，则用JSON.parse转换，如果不存在，直接按Json数据处理
								//从后台发post送可以直接发json数据，不需要转换
				formatString:JSON.stringify({
					"type":"message",
					"command":"queryMessage",
					"version":"0.1",
					"id":"aaaaaaabbbbbbbbbbb",
					"data":{
						"filters":{
						  "type":"notify",
						  "read":"*",
						  "accepter":"zzgghh",
						  "topics":["system-notify"]
						},
						"options":{
						  "noContent":"false",
						  "paginate":{
							"pageSize":"5",
							"page":"0"
						}
					}
				  }
				})},
				success: function (data) {
					console.log("历史通知消息：");
					console.log(data.data.msgs);
					data.data.msgs.map(function(msg,i){
						$("#history_notify").append("系统通知" + i + ":" + msg.content + "<br/>")
					});
				},
				error:function(err){
					console.log(err);
				}
			});
			
			$.ajax({
				url: "http://59.110.5.217:30014/message/query",
				type:"POST",
				dataType:"JSON",
				data:{//前端用js post数据时，多层的json数据会被后台解析成‘data[filters][type]'='notify'这种格式，所以用formatString做键值转换一下，
								//我会在后台判断formatString是否存在，如果存在，则用JSON.parse转换，如果不存在，直接按Json数据处理
								//从后台发post送可以直接发json数据，不需要转换
				formatString:JSON.stringify({
					"type":"message",
					"command":"queryMessage",
					"version":"0.1",
					"id":"aaaaaaabbbbbbbbbbb",
					"data":{
						"filters":{
						  "type":"message",
						  "read":"*",
						  "accepter":"zzgghh"
						},
						"options":{
						  "noContent":"false",
						  "paginate":{
							"pageSize":"5",
							"page":"0"
						}
					}
				  }
				})},
				success: function (data) {
					console.log("历史通知消息：");
					console.log(data.data.msgs);
					data.data.msgs.map(function(msg,i){
						$("#history_message").append(msg.sender + "对你说" + ":" + msg.content + "<br/>")
					});
				},
				error:function(err){
					console.log(err);
				}
			});
			
			$.ajax({
				url: "http://59.110.5.217:30014/message/query",
				type:"POST",
				dataType:"JSON",
				data:{//前端用js post数据时，多层的json数据会被后台解析成‘data[filters][type]'='notify'这种格式，所以用formatString做键值转换一下，
								//我会在后台判断formatString是否存在，如果存在，则用JSON.parse转换，如果不存在，直接按Json数据处理
								//从后台发post送可以直接发json数据，不需要转换
				formatString:JSON.stringify({
					"type":"message",
					"command":"queryMessage",
					"version":"0.1",
					"id":"aaaaaaabbbbbbbbbbb",
					"data":{
						"filters":{
						  "type":"group",
						  "read":"*",
						  "accepter":"zzgghh",
						  "groupId":"1"
						},
						"options":{
						  "noContent":"false",
						  "paginate":{
							"pageSize":"5",
							"page":"0"
						}
					}
				  }
				})},
				success: function (data) {
					data.data.msgs.map(function(msg,i){
						if(msg.sender != "zzgghh"){
							$("#content").append("<div>"+msg.sender+"说："+msg.content+ "(" +msg.id + msg.readed+ ")" +"</div></br>");
						} else {
							$("#content").append("<div style='float:right;'>"+"zzgghh"+"说："+msg.content+"("+msg.id + msg.readed+ ")" +"</div></br>");
						}						
					});
				},
				error:function(err){
					console.log(err);
				}
			});
			
			$('#group_load').on('click',function(){
				++groupCount;
				var page = groupCount.toString();
				$.ajax({
					url: "http://59.110.5.217:30014/message/query",
					type:"POST",
					dataType:"JSON",
					data:{//前端用js post数据时，多层的json数据会被后台解析成‘data[filters][type]'='notify'这种格式，所以用formatString做键值转换一下，
									//我会在后台判断formatString是否存在，如果存在，则用JSON.parse转换，如果不存在，直接按Json数据处理
									//从后台发post送可以直接发json数据，不需要转换
					formatString:JSON.stringify({
						"type":"message",
						"command":"queryMessage",
						"version":"0.1",
						"id":"aaaaaaabbbbbbbbbbb",
						"data":{
							"filters":{
							  "type":"group",
							  "read":"*",
							  "accepter":"zzgghh",
							  "groupId":"1"
							},
							"options":{
							  "noContent":"false",
							  "paginate":{
								"pageSize":"5",
								"page":page
							}
						}
					  }
					})},
					success: function (data) {
						data.data.msgs.map(function(msg,i){
							if(msg.sender != "zzgghh"){
								$("#content").prepend("<div>"+msg.sender+"说："+msg.content+ "(" + msg.readed+ ")" +"</div></br>");
							} else {
								$("#content").prepend("<div style='float:right;'>"+"zzgghh"+"说："+msg.content+"(" + msg.readed+ ")" +"</div></br>");
							}						
						});
					},
					error:function(err){
						console.log(err);
					}
				});
				
			});
			
        });
    </script>
</head>
<body>
<div style="margin-left:50px;">
	<div id="init_message" style="width:700px;height:100px;border:1px black solid;overflow:auto;">
		初始化：</br>
	</div>
	</br>
	<div>
		<div id="history_message" style="width:700px;height:150px;border:1px black solid;float:left;overflow:auto;">
			历史消息：</br>
		</div>
		<div id="message" style="width:700px;height:150px;border:1px black solid;float:left;overflow:auto;">
			实时消息：</br>
		</div>
	</div>
	</br>
	<div>
		
		<div id="history_notify" style="width:700px;height:150px;border:1px black solid;float:left;overflow:auto;">
		历史通知：</br>
		</div>
		<div id="notify" style="width:700px;height:150px;border:1px black solid;float:left;overflow:auto;">
		实时通知：</br>
		</div>
	</div>
	</br></br>
	<div style="float:left;clear:both;">
		群消息：
		<div style="width:450px;height:350px;overflow-y:scroll;border:1px solid black;margin-bottom:20px;">
			<a id="group_load" style="margin-left:200px;border-bottom:1px solid #00F;color:#00F;cursor:pointer;">点击加载</a>
			<div id="content">
			</div>
		</div>
		<textarea id="sender_c" style="width:370px;height:50px;overflow:auto;border:1px solid black;margin-bottom:20px;float:left"></textarea>
		<button id="send" style="float:left;width:50px;height:50px;margin-left:20px;">发送</button>
	</div>
</div>
</body>
</html>